<template>
  <div>
    <div class="goods-img"></div>

    <div class="goods-name">
      <div class="title1">超级好的果汁洗面奶</div>
      <div class="title2">补充规则比如有效期 兑换地点等</div>
      <div class="title3">500积分</div>
    </div>

    <div class="container1">
      <div class="table">
        <div class="tr" v-for="(item, index) in list" :key="index">
          <div class="td w-20">{{item.name}}</div>
          <div class="td w-80">{{item.value}}</div>
        </div>
      </div>
    </div>

    <div class="text">
      <div>注意事项</div>
      <div>1、兑换此券即可0元购买该商品</div>
      <div>2、仅限此商品使用，兑换后5天内有效</div>
      <div>3、仅限兑换定位地区使用</div>
      <div>4、可与优惠券叠加使用</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          name: '规格',
          value: '500g'
        }
      ]
    }
  }
}
</script>

<style scoped>
.goods-img {
  height: 600rpx;
  width: 100%;
  background: green;
}

.goods-name {
  text-align: center;
  padding: 30rpx;
}

.title1 {
  font-size: 32rpx;
}

.title2 {
  font-size: 28rpx;
  color: #ccc;
}

.title3 {
  font-size: 40rpx;
  color: #ff626b;
  margin: 20rpx;
}
.text {
  font-size: 28rpx;
  margin: 30rpx;
  line-height: 1.5;
}
.container1 {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.table {
  border: 1px solid #dadada;
  border-right: 0;
  border-bottom: 0;
  width: 95%;
  font-size: 28rpx;
}
.tr {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.th,
.td {
  padding: 10px;
  border-bottom: 1px solid #dadada;
  border-right: 1px solid #dadada;
  text-align: center;
}

.w-20 {
  width: 20%;
}

.w-80 {
  width: 80%;
  color: #888888;
}

.th {
  font-weight: 400;
  background-color: #dadada;
}
</style>
